<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>论述题</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="./js/css.css">
  <link rel="stylesheet" href="./js/jquery.mobile-1.4.5.min.css">

  <script src="./js/jquery.min.js"></script> 
  <script type="text/javascript" src="./js/TweenMax.min.js"></script>

  <script type="text/javascript">

    var errs=new Array()
    var v = 1;
    var max = 924;
    var context = '';
    var audio = null;
    var zanting = true;
  
    $(document).ready(function () {
  
     
      $.getJSON("json/1.json", function (data) {
          var question = "";//存储数据的变量
          var s1 = "";
          var $qtip = $("#question");
          var $s1tip = $("#s1");
          $qtip.empty();//清空内容
          $s1tip.empty();//清空内容
  
          $.each(data, function (haha, info) {
              question = info["question"];
              s1 = info["s1"];
          })
          $qtip.html(question);//显示处理后的数据
          $s1tip.html(s1);
          context = question+s1;
      });
      // if(v<=1){
      //   $("#btn1").parent().css("display","none");
      // }
  
      //audio = document.createElement('audio');
      //audio.setAttribute('src', $('.active-song').attr('data-src'));
  
      var tl = new TimelineMax();
      tl.to('.player__albumImg', 3, {
          rotation: '360deg',
          repeat: -1,
          ease: Power0.easeNone
      }, '-=0.2');
      tl.pause();
  
      $('.player__play').click(function () {
  
          if ($('.player').hasClass('play')) {
              $('.player').removeClass('play');
              PauseSound();
              TweenMax.to('.player__albumImg', 0.2, {
                  scale: 1,
                  ease: Power0.easeNone
              })
              tl.pause();
          } else {
              $('.player').addClass('play');
              if(zanting){
                PlaySound(context,false);
              }else{
                PlaySound(context,true);
              }
              zanting = false;
              TweenMax.to('.player__albumImg', 0.2, {
                  scale: 1.1,
                  ease: Power0.easeNone
              })
              tl.resume();
          }
  
      });
  
  
      var playhead = document.getElementById("playhead");
     
  
      $('.player__next').click(function () {
          if ($('.player .player__albumImg.active-song').is(':last-child')) {
              $('.player__albumImg.active-song').removeClass('active-song');
              $('.player .player__albumImg:first-child').addClass('active-song');
              
          } else {
              $('.player__albumImg.active-song').removeClass('active-song').next().addClass('active-song');
              
          }
          zanting = true;
         
      });
  
      $('.player__prev').click(function () {
          if ($('.player .player__albumImg.active-song').is(':first-child')) {
              $('.player__albumImg.active-song').removeClass('active-song');
              $('.player .player__albumImg:last-child').addClass('active-song');
             
          } else {
              $('.player__albumImg.active-song').removeClass('active-song').prev().addClass('active-song');
              
          }
          zanting = true;
      });
  
  });
  
  
  $(function () {
  
      $("#btn2").click(
          function () {
            
            if(v<max){
              v++;
              $.getJSON("json/"+v+".json", function (data) {
              
                var question = "";//存储数据的变量
                var s1 = "";
      
                var $qtip = $("#question");
                var $s1tip = $("#s1");
                $qtip.empty();//清空内容
                $s1tip.empty();//清空内容
      
                $.each(data, function (haha, info) {
                    question = info["question"];
                    s1 = info["s1"];
                })
                $qtip.html(question);//显示处理后的数据
                $s1tip.html(s1);
                context = question+s1;
              });
            }
            
          
      }),
  
      $("#btn1").click(
          function () {
            
            if(v>1){
              v--;
              $.getJSON("json/"+v+".json", function (data) {
              
                var question = "";//存储数据的变量
                var s1 = "";
                var $qtip = $("#question");
                var $s1tip = $("#s1");
                $qtip.empty();//清空内容
                $s1tip.empty();//清空内容
                $.each(data, function (haha, info) {
                    question = info["question"];
                    s1 = info["s1"];
                })
                $qtip.html(question);//显示处理后的数据
                $s1tip.html(s1);
                context = question+s1;
              });
              
          }
            
      })
  });
  
  function PlaySound(context,goon){
    if(!goon){
      var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" +encodeURI(context);
      audio = new Audio(url);
    }
    audio.controls = false; //这样控件才能显示出来 
    audio.play();
  
    
    audio.addEventListener("ended", function () {
      var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById("player_play").dispatchEvent(e);
    });
  };
  function PauseSound(){
    audio.pause();
  };
  
  </script>

  </head>

<body>
  <div class="player">
    <div class="player__bar">
      <div class="player__album">
        <div class="player__albumImg active-song" data-author="" data-song="" data="" data-src="" style="background-image: url(img/a.jpg)"> </div>
        <div class="player__albumImg" data-author="" data-song="" data="" data-src="" style="background-image: url(img/a.jpg)"> </div>
      </div>
      <div class="player__controls">
        <div class="player__prev" id="btn1">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M26.695 34.434v31.132L54.5 49.998z"></path>
            <path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"></path>
            <g>
              <path d="M55.5 34.434v31.132l27.805-15.568z"></path>
              <path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"></path>
            </g>
          </svg>
        </div>
        <div class="player__play" id="player_play">
          <svg class="icon play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
            <path d="M51.109 30.335l-36-24A2 2 0 0 0 12 8v48a2.003 2.003 0 0 0 2 2c.388 0 .775-.113 1.109-.336l36-24a2 2 0 0 0 0-3.329z"></path>
          </svg>
          <svg class="icon pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M22.537 8.046h17.791c1.104 0 2.003.898 2.003 1.993v79.912a2.005 2.005 0 0 1-2.003 2.003h-17.79a2.005 2.005 0 0 1-2.003-2.003V10.04c0-1.095.898-1.993 2.002-1.993zM59.672 8.046h17.8c1.095 0 1.993.898 1.993 1.993v79.912a2.003 2.003 0 0 1-1.993 2.003h-17.8a1.997 1.997 0 0 1-1.993-2.003V10.04c0-1.095.889-1.993 1.993-1.993z"></path>
          </svg>
        </div>
        <div class="player__next" id="btn2">
          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <path d="M26.695 34.434v31.132L54.5 49.998z"></path>
            <path d="M24.07 34.434v31.132c0 2.018 2.222 3.234 3.95 2.267l27.804-15.568c1.706-.955 1.707-3.578 0-4.533L28.02 32.168c-2.957-1.655-5.604 2.88-2.649 4.533l27.805 15.564v-4.533L25.371 63.3l3.95 2.267V34.435c-.001-3.387-5.251-3.387-5.251-.001z"></path>
            <g>
              <path d="M55.5 34.434v31.132l27.805-15.568z"></path>
              <path d="M52.875 34.434v31.132c0 2.018 2.222 3.234 3.949 2.267 9.27-5.189 18.537-10.379 27.805-15.568 1.705-.955 1.705-3.578 0-4.533L56.824 32.168c-2.957-1.655-5.604 2.88-2.648 4.533l27.803 15.564v-4.533L54.176 63.3l3.949 2.267V34.435c0-3.387-5.25-3.387-5.25-.001z"></path>
            </g>
          </svg>
        </div>
      </div>
    </div>
    
  </div>
  <div data-role="page">
    <div data-role="header">
    <h1>论述题</h1>
    </div>
      
    <div data-role="main" class="ui-content">
      
      <form method="post" action="">
        
          <p id="question">
            
          </p>
          <div data-role="controlgroup">
            <label id="s1" class="ask" for="ss1">
              
            </label>
          </div> 
          <div class="box"></div> 
      </form>
      
    </div>
  </div>

</body></html>